<!doctype html>
<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.tags.head %>
    <!-- 页面css -->
    <link rel="stylesheet" href="./css/articleDetailHtml.css" />
    <link rel="stylesheet" href="./css/teamDetail/teamDetail.css" />
    <link rel="stylesheet" href="./css/teamDetail/info.css" />
    <link rel="stylesheet" href="./css/teamDetail/fixtures.css" />
    <link rel="stylesheet" href="./css/teamDetail/tables.css" />
    <link rel="stylesheet" href="./css/teamDetail/news.css" />
    <link rel="stylesheet" href="./css/teamDetail/players.css" />
  </head>

  <body>
    <div class="page">
      <header class="page-header">
        <div class="page-header-nav">
          <div class="header-nav-left">
            <span class="glyphicon glyphicon-menu-left nav-back-btn" onclick="router.back()"></span>
          </div>
          <div class="header-nav-title width-0 display-none">
            <div class="text-align-center text-ellipsis">
              <img class="display-inline-block width-height-20 margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
              <span>Manchester United</span>
            </div>
          </div>
          <div class="header-nav-right">
            <span class="tag-primary">Follow</span>
          </div>
        </div>
      </header>
      <!-- 内容主体 -->
      <main class="page-main">
        <div class="flex-column text-white team-info">
          <div class="flex-column align-center">
            <img class="team-logo" src="./images/ball_park.png" alt="" srcset="" />
            <h3 class="font-size-normal margin-0 margin-top-10 margin-bottom-10">Manchester United</h3>
            <p class="font-size-min">
              <span>Ranking：1</span>
              <span>Record：2</span>
              <span>Win 0</span>
              <span>draw 0</span>
              <span>lose</span>
            </p>
          </div>
        </div>

        <!-- 切换tab-nav -->
        <div class="full-height flex-column">
          <div class="align-center bg-regular">
            <div class="flex-1 width-0 position-relative">
              <div class="tab-nav list-type-tab">
                <div class="tab-nav-item" data-role="Info"><span class="tab-nav-name">Info</span></div>
                <div class="active tab-nav-item" data-role="Fixtures"><span class="tab-nav-name">Fixtures</span></div>
                <div class="tab-nav-item" data-role="Tables"><span class="tab-nav-name">Tables</span></div>
                <div class="tab-nav-item" data-role="News"><span class="tab-nav-name">News</span></div>
                <div class="tab-nav-item" data-role="Players"><span class="tab-nav-name">Players</span></div>
              </div>
              <img class="height-30 position-absolute-rightTop" style="top: 5px" src="./images/border_bg.png" alt="" srcset="" />
            </div>

            <div class="text-align-center text-theme-primary white-space-nowrap margin-left-10 margin-right-10">
              <div class="btn-group action-sheet">
                <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="text-theme-primary margin-right-5">24-25</span>
                  <span class="glyphicon glyphicon-menu-down"></span>
                </div>
                <ul class="dropdown-menu">
                  <li class="active"><a>24-25</a></li>
                  <li><a>24-26</a></li>
                  <li><a>24-27</a></li>
                  <li><a>24-28</a></li>
                  <li><a>24-29</a></li>
                </ul>
              </div>
            </div>
          </div>

          <div class="flex-1 height-0">
            <!-- Info -->
            <div id="Info" class="full-height margin-left-10 margin-right-10 hide-none">
              <div class="flex-column full-height">
                <div class="overflow-y-auto">
                  <!-- Basic information -->
                  <div class="card-white margin-top-10">
                    <div class="flex-column">
                      <div class="justify-between align-center margin-top-10 margin-bottom-15">
                        <h4 class="margin-0 font-size-small font-weight-bold title_bg_icon_min">Basic information</h4>
                        <a class="text-color-secondary font-size-min" href="teamInfo.html">ALL ></a>
                      </div>
                      <div class="article-detail-html">
                        Manchester United Football Club, founded in 1878, is one of the most successful and prestigious football clubs in England. The club is headquartered in Manchester, England.
                        Achievements: Manchester United Football Club is one of the most successful clubs in the Premier League, having won multiple Premier League championships. They are still in the
                        English Football Cup
                      </div>

                      <div class="split-line margin-top-15 margin-bottom-15"></div>

                      <div class="flex-column">
                        <div class="flex flex-gap-10 margin-bottom-20">
                          <div class="flex-1 flex-column">
                            <span class="margin-bottom-2">Manchester</span>
                            <span class="text-color-secondary font-size-min">United Full name</span>
                          </div>
                          <div class="flex-1 flex-column">
                            <span class="margin-bottom-2">Eric Tenghakh</span>
                            <span class="text-color-secondary font-size-min">Head coach</span>
                          </div>
                        </div>
                        <div class="flex flex-gap-10 margin-bottom-10">
                          <div class="flex-1 flex-column">
                            <span class="margin-bottom-2">Manchester</span>
                            <span class="text-color-secondary font-size-min">United Full name</span>
                          </div>
                          <div class="flex-1 flex-column">
                            <span class="margin-bottom-2">Eric Tenghakh</span>
                            <span class="text-color-secondary font-size-min">Head coach</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Transfer record -->
                  <div class="card-white margin-top-10">
                    <div class="flex-column margin-bottom-10">
                      <div class="justify-between align-center margin-top-10 margin-bottom-15">
                        <h4 class="margin-0 font-size-small font-weight-bold title_bg_icon_min">Transfer record</h4>
                        <a class="text-color-secondary font-size-min" href="transferDetail.html">ALL ></a>
                      </div>
                    </div>

                    <!-- transferred in -->
                    <div class="flex-column font-size-min">
                      <div class="flex margin-bottom-10 white-space-nowrap">
                        <div class="flex-2 text-green">transferred in</div>
                        <div class="flex-2 text-color-regular">
                          <span class="margin-left-15">Team/Time</span>
                        </div>
                        <div class="flex-1 text-align-right text-color-regular">Transfer fee</div>
                      </div>
                      <div class="flex margin-bottom-15">
                        <div class="flex-2">
                          <div class="flex">
                            <a href="playerDetail.html">
                              <img class="width-height-25 margin-top-5 margin-right-5" src="./images/ball_park.png" alt="" srcset="" />
                            </a>
                            <div class="flex-column">
                              <a href="playerDetail.html" class="">Mazraoui</a>
                              <a href="playerDetail.html" class="font-size-s text-color-secondary">26/DC/Morocco</a>
                            </div>
                          </div>
                        </div>
                        <div class="flex-2">
                          <div class="flex">
                            <img class="width-height-10 margin-top-10 margin-right-5" src="./images/teamDetail/left_icon.png" alt="" srcset="" />
                            <div class="flex-column">
                              <span>Bayern Munich</span>
                              <span class="font-size-s text-color-secondary">2021/08/13</span>
                            </div>
                          </div>
                        </div>
                        <div class="flex-1 text-align-right margin-top-10">15M EUR</div>
                      </div>
                      <div class="flex">
                        <div class="flex-2">
                          <div class="flex">
                            <a href="playerDetail.html">
                              <img class="width-height-25 margin-top-5 margin-right-5" src="./images/ball_park.png" alt="" srcset="" />
                            </a>
                            <div class="flex-column">
                              <a href="playerDetail.html" class="">Mazraoui</a>
                              <a href="playerDetail.html" class="font-size-s text-color-secondary">26/DC/Morocco</a>
                            </div>
                          </div>
                        </div>
                        <div class="flex-2">
                          <div class="flex">
                            <img class="width-height-10 margin-top-10 margin-right-5" src="./images/teamDetail/left_icon.png" alt="" srcset="" />
                            <div class="flex-column">
                              <span class="">Bayern Munich</span>
                              <span class="font-size-s text-color-secondary">2021/08/13</span>
                            </div>
                          </div>
                        </div>
                        <div class="flex-1 text-align-right margin-top-10">15M EUR</div>
                      </div>
                    </div>

                    <!-- Transferred out -->
                    <div class="flex-column font-size-min margin-top-30">
                      <div class="flex margin-bottom-10 white-space-nowrap">
                        <div class="flex-2 text-red">transferred out</div>
                        <div class="flex-2 text-color-regular">
                          <span class="margin-left-15">Team/Time</span>
                        </div>
                        <div class="flex-1 text-align-right text-color-regular">Transfer fee</div>
                      </div>
                      <div class="flex margin-bottom-15">
                        <div class="flex-2">
                          <div class="flex">
                            <a href="playerDetail.html">
                              <img class="width-height-25 margin-top-5 margin-right-5" src="./images/ball_park.png" alt="" srcset="" />
                            </a>
                            <div class="flex-column">
                              <a href="playerDetail.html" class="">Mazraoui</a>
                              <a href="playerDetail.html" class="font-size-s text-color-secondary">26/DC/Morocco</a>
                            </div>
                          </div>
                        </div>
                        <div class="flex-2">
                          <div class="flex">
                            <img class="width-height-10 margin-top-10 margin-right-5" src="./images/teamDetail/right_icon.png" alt="" srcset="" />
                            <div class="flex-column">
                              <span class="">Bayern Munich</span>
                              <span class="font-size-s text-color-secondary">2021/08/13</span>
                            </div>
                          </div>
                        </div>
                        <div class="flex-1 text-align-right margin-top-10">15M EUR</div>
                      </div>
                      <div class="flex">
                        <div class="flex-2">
                          <div class="flex">
                            <a href="playerDetail.html">
                              <img class="width-height-25 margin-top-5 margin-right-5" src="./images/ball_park.png" alt="" srcset="" />
                            </a>
                            <div class="flex-column">
                              <a href="playerDetail.html" class="">Mazraoui</a>
                              <a href="playerDetail.html" class="font-size-s text-color-secondary">26/DC/Morocco</a>
                            </div>
                          </div>
                        </div>
                        <div class="flex-2">
                          <div class="flex">
                            <img class="width-height-10 margin-top-10 margin-right-5" src="./images/teamDetail/right_icon.png" alt="" srcset="" />
                            <div class="flex-column">
                              <span class="">Bayern Munich</span>
                              <span class="font-size-s text-color-secondary">2021/08/13</span>
                            </div>
                          </div>
                        </div>
                        <div class="flex-1 text-align-right margin-top-10">15M EUR</div>
                      </div>
                    </div>
                  </div>

                  <!-- Team Honor -->
                  <div class="card-white margin-top-10 margin-bottom-10">
                    <div class="flex-column">
                      <div class="justify-between align-center margin-top-10 margin-bottom-15">
                        <h4 class="margin-0 font-size-small font-weight-bold title_bg_icon_min">Team Honor</h4>
                      </div>
                    </div>

                    <div class="flex-column">
                      <div class="flex margin-bottom-20">
                        <div>
                          <img class="width-40 height-auto margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
                        </div>

                        <div class="flex-column">
                          <div class="font-weight-bold margin-bottom-5">
                            <span class="margin-right-5">English FA Cup Champion</span>
                            <span class="text-red">×13</span>
                          </div>
                          <div class="flex flex-wrap flex-gap-10">
                            <span class="honor-tag">2023-2024</span>
                            <span class="honor-tag">2023-2024</span>
                            <span class="honor-tag">2023-2024</span>
                            <span class="honor-tag">2023-2024</span>
                            <span class="honor-tag">2023-2024</span>
                          </div>
                        </div>
                      </div>
                      <div class="flex margin-bottom-20">
                        <div>
                          <img class="width-40 height-auto margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
                        </div>

                        <div class="flex-column">
                          <div class="font-weight-bold margin-bottom-5">
                            <span class="margin-right-5">English FA Cup Champion</span>
                            <span class="text-red">×13</span>
                          </div>
                          <div class="flex flex-wrap flex-gap-10">
                            <span class="honor-tag">2023-2024</span>
                            <span class="honor-tag">2023-2024</span>
                            <span class="honor-tag">2023-2024</span>
                            <span class="honor-tag">2023-2024</span>
                            <span class="honor-tag">2023-2024</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Fixtures -->
            <div id="Fixtures" class="full-height fixtures">
              <div class="flex-column full-height">
                <div class="flex-column">
                  <div class="flex bg-regular padding-10">
                    <div class="flex-1 width-0 overflow-x-auto">
                      <div class="flex flex-gap-10 white-space-nowrap search-match-type">
                        <span class="search-item-tag tag-primary">Premier League</span>
                        <span class="search-item-tag tag-gray">Premier League</span>
                      </div>
                    </div>

                    <div class="flex margin-left-30 bg-primary radius-big search-team-type" style="padding: 0 2px">
                      <span class="search-item-tag tag-gray">Home</span>
                      <span class="search-item-tag tag-white-primary">All</span>
                      <span class="search-item-tag tag-gray">Away</span>
                    </div>
                  </div>
                  <div class="flex font-size-min text-color-regular text-align-center margin-top-10 margin-bottom-5">
                    <div class="flex-2">Time</div>
                    <div class="flex-6 flex">
                      <div class="flex-2">Home</div>
                      <div class="flex-1">Score</div>
                      <div class="flex-2">Away</div>
                    </div>
                    <div class="flex-1">H</div>
                    <div class="flex-1">O/U</div>
                    <div class="flex-1">C</div>
                  </div>
                </div>
                <div class="flex-1 height-0 overflow-y-auto fixtures-list">
                  <div class="flex-column list-box font-size-s"><%= htmlWebpackPlugin.options.tags.fixturesItem %></div>
                </div>
              </div>
            </div>
            <!-- Tables -->
            <div id="Tables" class="full-height tables hide-none">
              <div class="flex-column full-height">
                <div class="flex-column">
                  <div class="flex bg-regular padding-10">
                    <div class="flex-1 width-0 overflow-x-auto">
                      <div class="flex flex-gap-10 white-space-nowrap search-match-type">
                        <span class="search-item-tag tag-primary">Premier League</span>
                        <span class="search-item-tag tag-gray">Premier League</span>
                      </div>
                    </div>

                    <div class="flex margin-left-30 bg-primary radius-big search-team-type" style="padding: 0 2px">
                      <span class="search-item-tag tag-gray">Home</span>
                      <span class="search-item-tag tag-white-primary">All</span>
                      <span class="search-item-tag tag-gray">Away</span>
                    </div>
                  </div>
                  <div class="flex font-size-min text-color-regular text-align-center margin-top-10 margin-bottom-5">
                    <div class="flex-1"></div>
                    <div class="flex-2 flex">
                      <span class="margin-left-10">Time</span>
                    </div>
                    <div class="flex-1">P</div>
                    <div class="flex-2">W/D/L</div>
                    <div class="flex-1">F/A</div>
                    <div class="flex-1">GD</div>
                    <div class="flex-1">Pts</div>
                  </div>
                </div>
                <div class="flex-1 height-0 overflow-y-auto">
                  <div class="flex-column list-box font-size-s"><%= htmlWebpackPlugin.options.tags.tablesItem %></div>
                </div>
              </div>
            </div>
            <!-- News -->
            <div id="News" class="full-height hide-none">
              <div class="flex-column full-height">
                <div class="overflow-y-auto">
                  <div class="padding-10 flex-column flex-gap-10"><%= htmlWebpackPlugin.options.tags.news %></div>
                </div>
              </div>
            </div>
            <!-- Players -->
            <div id="Players" class="full-height players hide-none">
              <div class="flex-column full-height">
                <div class="overflow-y-auto">
                  <!-- Coach -->
                  <div class="flex-column font-size-min">
                    <div class="padding-10">
                      <div class="font-weight-bold">Coach</div>
                    </div>
                    <div class="padding-10 bg-regular">
                      <div class="flex align-center margin-top-5 margin-bottom-5">
                        <div class="role-icon margin-right-10">
                          <img class="width-20 height-auto" src="./images/teamDetail/coach_icon.png" alt="" srcset="" />
                        </div>
                        <div class="player-photo margin-right-10">
                          <img class="width-30 height-auto" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                        <div class="flex-column font-size-min">
                          <div class="text-ellipsis">Haaland</div>
                          <div class="text-ellipsis text-color-secondary font-size-min">Age 26/Head coach/Spain</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <%= htmlWebpackPlugin.options.tags.playersItem %>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <%= htmlWebpackPlugin.options.tags.foot %>
    <script src="./js/teamDetail.js"></script>
  </body>
</html>
